<template>
  <!-- (不完整，请求问题) -->
  <div class="technicDetails">
    <!-- 头部导航 -->
    <van-nav-bar left-arrow fixed placeholder @click-left="$router.back()" />
    <!-- 标题模块 -->
    <div class="title">
      <div class="left">
        <p>{{ technicDetailsList.title }}</p>
        <div class="bottom">
          <van-row>
            <van-col span="15"
              ><span class="time">{{
                technicDetailsList.updated_at | technicTime
              }}</span></van-col
            >
            <van-col span="5"
              ><span class="watch"
                ><van-icon name="browsing-history-o" />{{
                  technicDetailsList.read
                }}</span
              ></van-col
            >
            <van-col span="4"
              ><van-icon name="good-job-o" /><span>{{
                technicDetailsList.star
              }}</span></van-col
            >
          </van-row>
        </div>
      </div>
    </div>
    <!-- 文章内容 -->
    <div class="content" v-html="technicDetailsList.content"></div>
  </div>
</template>

<script>
import moment from 'moment'
import { getTechnicDetailsAPI } from '@/api'
moment.locale('zh-cn')
export default {
  data () {
    return {
      technicDetailsList: {}
    }
  },
  async created () {
    // 获取面试技巧详情
    const id = this.$route.query.id
    console.log(id)
    const res = await getTechnicDetailsAPI(id)
    console.log(res)
    this.technicDetailsList = res.data.data
  },
  filters: {
    // 面试技巧模块发布时间过滤器
    technicTime: function (value) {
      return moment().format('YYYY.MM.DD')
    }
  }
}
</script>

<style lang="less">
.technicDetails {
  .title {
    background-color: #fff;
    .left {
      height: 95px;
      margin-bottom: 20px;
      display: flex;
      padding: 0 15px;
      flex-direction: column;
      justify-content: space-between;
      p {
        margin-bottom: 20px;
        font-size: 18px;
        font-weight: 700;
      }
      .bottom {
        font-size: 12px;
        margin-bottom: 4px;
      }
    }
  }
  .content {
    text-indent: 32px;
    margin: 0 10px;
    background-color: #fff;
    color: #181a39;
    font-size: 16px;
  }
}
</style>
